<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>  
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="expires" content="0"> 
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<%@ include file="../../common/StyleEUIMobile.jsp"%>
 
<script>

var expandedRows = []; // 存储已展开的行索引或唯一标识

$(document).ready(function(){
	
		var orderId = $("#orderId").val();
	    $('#orderDetailsDatagrid').datagrid({
		url : 'ipadJSON!getPeihuoOrderById',
		queryParams: {
			'formBean.orderId':orderId,
		} ,
		fit : true,
		fitColumns: true,
		border : false,	
		singleSelect:true,
		nowrap : false,
		rownumbers : true,
		striped: true,
		columns : [ [
			{	
				field : 'productInfo',
				title : '公司货号',
				width : '25%',	
				align: 'center'
			},{
				field : 'pbId',
				title : '条码ID',			
				width : '10%',
				hidden: true
			},{	
				field : 'yearInfo',
				title : '年份',
				width : '10%',	
				align: 'center'
			},{	
				field : 'category',
				title : '货品类别',
				width : '20%',	
				align: 'center'
			},{	
				field : 'snums',
				title : '选货',
				width : '10%',	
				align: 'center',    
				formatter: function(value) {
					  return '<span style="font-size: 17px;font-weight:bold;font-style:italic;">' + value + '</span>';
				}
			},{	
				field : 'nums',
				title : '配货',
				width : '10%',	
				align: 'center',
				formatter: function(value) {
					  return '<span style="font-size: 17px;font-weight:bold;font-style:italic;">' + value + '</span>';
				}
			},{	
				field : 'inventoryNums',
				title : '库存',
				width : '10%',	
				align: 'center',
				formatter: function(value) {
					  return '<span style="font-size: 17px;font-weight:bold;font-style:italic;">' + value + '</span>';
				}
			},{	
				field : 'progress',
				title : '配货率',
				width : '10%',
				formatter: function (v, r, i) {
					var htmlstr = "";
					if(v <= 60){
						 htmlstr = '<div class="easyui-progressbar progressbar easyui-fluid" style="width: 100%; height: 20px;">'
							  + '<div class="progressbar-value" style="width: '+v+'%; height: 20px; line-height: 20px; background-color:#FFC0CB;"> '
							  + '<div class="progressbar-text" style="width: ' + v+'%'+ '; height: 20px; line-height: 20px;background-color:#FFC0CB;">' + v+ '%</div>'
							  + '</div>'
							  + '</div>';
							  return htmlstr;	
					}else if(v<100 && v>60){
						 htmlstr = '<div class="easyui-progressbar progressbar easyui-fluid" style="width: 100%; height: 20px;">'
							  + '<div class="progressbar-value" style="width: '+v+'%; height: 20px; line-height: 20px; background-color:#FFDAB9;"> '
							  + '<div class="progressbar-text" style="width: ' + v+'%'+ '; height: 20px; line-height: 20px;background-color:#FFDAB9;">' + v+ '%</div>'
							  + '</div>'
							  + '</div>';
							  return htmlstr;	
					}else if(v==100){
						htmlstr = '<div class="easyui-progressbar progressbar easyui-fluid" style="width: 100%; height: 20px;">'
							  + '<div class="progressbar-value" style="width: '+v+'%; height: 20px; line-height: 20px; background-color:#90EE90;"> '
							  + '<div class="progressbar-text" style="width: ' + v+'%'+ '; height: 20px; line-height: 20px;background-color:#90EE90;">' + v+ '%</div>'
							  + '</div>'
							  + '</div>';
							  return htmlstr;	
					}
					 				 
					 }
			}]],
		 view: detailview,
		 detailFormatter: function(rowIndex, rowData){
			 return '<table border="0"><tr>' +
            				'<td rowspan=2 style="border:0"><img src="'+rowData.imgUrl+'" width="100" height="100"></td>' +
             				'<td style="border:0;width:140px;text-align:right;font-size:15px;">齐手：</td>' +
             				'<td style="border:0;width:20px;font-size:18px;"><input type="checkbox" style="width:23px;height: 23px;"  id="check'+rowData.pbId+'" checked/> </td>' +
             				'<td style="border:0;width:100px;text-align:right;font-size:15px;">齐手数量：</td>' +
             				'<td style="border:0;width:20px;font-size:18px;">'+rowData.numPreHand+'</td>' +
             				'<td style="border:0;width:90px;text-align:right;font-size:15px;">货号：</td>' +
             				'<td style="border:0;width:100px;font-size:18px;">'+rowData.productCode+'</td>' +            				
             		
            				 '</tr><tr>'+
            				 '<td style="text-align:right;border:0;font-size:15px;">已配：</td>'+
            				 '<td style="border:0;text-align:right;"><button  class="button" onclick="editQuantityPeihuo('+rowIndex+','+rowData.pbId+','+rowData.snums+','+rowData.numPreHand+',true);">添加</button></td>'+
            				 '<td style="text-align:center;border:0;"><button   class="button2" id="productNums'+rowData.pbId+'" >'+rowData.nums+'</button></td>'+
            				 '<td style="border:0;text-align:left;border:0;"><button  class="button" onclick="editQuantityPeihuo('+rowIndex+','+rowData.pbId+','+rowData.snums+','+rowData.numPreHand+',false);">删除</button></td>'+
            				 '<td style="text-align:right;font-size:15px;border:0;">库存：</td>' +
              				 '<td style="text-align:left;font-size:16px;border:0;">'+rowData.inventoryNums+'</td>' +
            		          				 
            				 '</tr></table>';			 
		    },onExpandRow: function(index, row) {
		        if (!expandedRows.includes(index)) {
		            expandedRows.push(index); // 根据唯一标识记录展开行 ‌:ml-citation{ref="8" data="citationList"}
		        }
		        sessionStorage.removeItem("expandInfo");
		        sessionStorage.setItem("expandInfo",expandedRows);
		    },onCollapseRow: function(index, row) {
		        const idx = expandedRows.indexOf(index);
		        if (idx > -1) {
		            expandedRows.splice(idx, 1); // 移除已折叠行
		        }
		        sessionStorage.removeItem("expandInfo");
		        sessionStorage.setItem("expandInfo",expandedRows);
		    },onLoadSuccess: function(data) {
		    	var rows = $(this).datagrid('getRows');   
		    	let expandInfo = sessionStorage.getItem("expandInfo");
		    	if(expandInfo == null){
		    		for (var i = 0; i < rows.length; i++) {
			            $(this).datagrid('expandRow', i); // 逐行展开
			       }  
		    		 sessionStorage.setItem("expandInfo",expandedRows);
		    		 let expandInfo = sessionStorage.getItem("expandInfo");
		    	}else{
		    		const expandArray = expandInfo.split(',');
		    		for(let i = 0; i < expandArray.length; i++) {
		    	        $('#orderDetailsDatagrid').datagrid('expandRow',parseInt(expandArray[i]));
		    	      }
		    	}
		    	
		    	// 遍历所有行，设置展开按钮列高度
		        $(this).datagrid('getPanel')
		            .find('.datagrid-cell-expander')
		            .css('height', '25px'); 
		    },
		    onDblClickRow: function(index, row) {
		    	console.log(row);
		    	const isExpanded = $(this).datagrid('getExpander', index).hasClass('datagrid-row-expand');
		    	if(isExpanded){
		    		$('#orderDetailsDatagrid').datagrid('expandRow', index);
		    	}else{
		    		$('#orderDetailsDatagrid').datagrid('collapseRow', index);
		    	}		    			    
		    }
	});
	
})


/**
 * @describe:添加配货数量
 *
 * @param:条码ID,选货数量,齐手数量
 */
function editQuantityPeihuo(rowIndex,pbId,snums,numPreHand,isInsert){
	 //单据id
	var orderId = $("#orderId").val();
	//配货数量
	var productNums = $("#productNums"+pbId).text();
	//是否齐手
	var check = $("#check"+pbId).prop('checked');
	var isCheck =0;
	
	var nums =0;
	if(check){//齐手
		if(isInsert){
			nums = parseInt(productNums) + numPreHand;
		}else{
			nums = parseInt(productNums) - numPreHand;
		}			
	}else{//单件
		isCheck = 1;
		if(isInsert){
			nums = parseInt(productNums) + 1;
		}else{
			nums = parseInt(productNums) - 1;
		}	
	}	
	
	//单据进度
	var orderProgress = $("#orderDetailProgress").progressbar('getValue');
	// 单据进度为100% 后，继续添加配货数量，提示：
	if(isInsert && orderProgress == 100){
		 $.messager.alert('配货提示', "此单据已经配货完成,请核对单据信息,确认无误后,请点击保存单据", 'info');
	}else{
		var params = "formBean.orderProductIndex="+rowIndex+"&formBean.orderId="+orderId+"&formBean.pbId="+pbId+"&formBean.quantity="+nums+"&formBean.isCheck="+isCheck;
		$.post("ipadJSON!editInventoryById",params, updateOrderBKProcess,"json");	
	}
				
}


// 回调方法中添加pbId(注意：pbId);
function updateOrderBKProcess(data){
    var response = data;
	var returnCode = response.returnCode;
	var pbId = response.returnValue.pbId;
	//货品配货数量
	var nums = response.returnValue.quantityPeihuo;
	//货品配货进度
	var progress = response.returnValue.progress;
	//单据进度
	var orderProgress = response.returnValue.orderProgress;
	//货品序号
	var orderProductIndex =  response.returnValue.orderProductIndex;
	//单据未配数量
	var noNums =  response.returnValue.noNums;
	//单据已配数量
	var completeNums =  response.returnValue.completeNums;
	//单手、齐手
	var isCheck = response.returnValue.isCheck;
	//修改：单据进度
 	if(returnCode == SUCCESS){
 		$("#orderDetailProgress").progressbar('setValue', orderProgress);
 		$("#completeNums").val(completeNums);
 	}

	if (returnCode != SUCCESS)
	    $.messager.alert('配货提示', response.message, 'warning');
	else {
		//行数据展开栏：赋值配货数量
		$("#productNums"+pbId).text(nums);
		//修改行数据信息
		$('#orderDetailsDatagrid').datagrid('updateRow', {
		    index: orderProductIndex,
		    row: { nums: nums, progress: progress }
		});

    }	
 	//修改：是否齐手
	if(isCheck == 0){
		$("#check"+pbId).prop('checked', true); 
	}else{
		$("#check"+pbId).prop('checked', false); 
	}
	
	if(orderProgress == 100){
		 $.messager.alert('配货提示', "单据配货完成,请核对单据信息,确认无误后,请点击保存单据", 'info');
	}
}


/**
 * 一键展开或折叠
 */
function oneKeyUnfoldOrFold(){
	// 获取完整数据对象（含分页信息）
	var data = $('#orderDetailsDatagrid').datagrid('getData');
	// 提取总条数
	var productNums = data.rows.length; 
	var isFold = $("#isFold").val();
	if(isFold == "0"){
		for(let i=0;i<productNums;i++){
			$('#orderDetailsDatagrid').datagrid('expandRow', i);
		}
		$("#isFold").val(1);
        sessionStorage.setItem("expandInfo",expandedRows);
	}else{
		for(let i=0;i<productNums;i++){
			$('#orderDetailsDatagrid').datagrid('collapseRow', i);
		}
		$("#isFold").val(0);
        sessionStorage.removeItem("expandInfo");
	}
	
}

/**
 * 展开记录展开行信息
 */
function expandInfo(){
	for(let i = 0; i < expandedRows.length; i++) {
        $('#orderDetailsDatagrid').datagrid('expandRow', expandedRows[i]);
      }
}
/**
 * 返回
 */
function backHome(){
	 sessionStorage.removeItem("expandInfo");
	 var orderId = $("#orderId").val();	
	 window.location.href = '<%=request.getContextPath()%>/actionIpad/hqIpadJSP!goBack?formBean.orderId='+orderId;
	 
}

/**
 * 单据保存
 */
function saveOrder(){
	var orderId = $("#orderId").val();	
	var params = "formBean.orderId="+orderId;
	$.post("ipadJSON!saveHeadIpadOrder",params, saveOrderBKProcess,"json");	
}
/**
 * 单据保存回调
 */
function saveOrderBKProcess(data){
    var response = data;
	var returnCode = response.returnCode;
	var pbId = response.returnValue.pbId;
	var nums = response.returnValue.quantityPeihuo;
	$.messager.alert('保存提示', response.message, 'info');

}


</script>  
    
<body>
    <div class="easyui-navpanel">
        <header>
            <div class="m-toolbar">
               <div class="m-title">客户：<s:property value="formBean.ipadPdaVO.custName"/>  </div>
               <div class="m-left">	
                    <a onclick="backHome();" href="javascript:void(0);" class="easyui-linkbutton m-back" ><span>返回上一页</span></a>
                </div>
               
                <div class="m-right">
                	 <a onclick="saveOrder();" href="javascript:void(0);" class="easyui-linkbutton c1" style="height:30px;" data-options=""><span> <s:property value="#session.LOGIN_USER_MOBILE.name" /></span> 保存单据</a>	
                </div>
            </div>
            
        </header>
		<%@ include file="../component/CommonPanel.jsp"%>
        <div style="">
         <hr style="filter: progid:DXImageTransform.Microsoft.Shadow(color=#987cb9, direction=145, strength=15);">
        <span style="position: relative; top:-5px;">货品详情：</span>
        <div>

        <table id="orderDetailsDatagrid"   data-options="rownumbers:true,singleSelect:true,
                autoRowHeight:false,pageSize:50" class="easyui-datagrid" style="height:760px;" >
    </tbody>
	</table>                
        </div>
		<div style="display:none">
			<input  id="orderId"  type="hidden" value="<s:property value="formBean.ipadPdaVO.id"/>" />		
			<input  id="isFold" type="hidden" value=1 />	
		</div>	
</div>	
</div>
</body>
<style>
/* 调整展开/折叠按钮尺寸 */
.datagrid-row-expand, 
.datagrid-row-collapse {
    width: 30px !important;    /* 按钮宽度 */
    height: 16px !important;   /* 按钮高度 */
    background-size: 19px 19px !important;  /* 图标实际显示尺寸 */
   	background-color: while!important;
           /* 调整按钮间距 */
}

.datagrid-header-expander{
line-height: 30px !important;
	 width: 45px !important; 
	 height: 30px !important; 
}



.datagrid-row-expand {
    background: url('<%=request.getContextPath()%>/conf_files/easyUI/themes/icons/add.png') no-repeat center;
}
.datagrid-row-collapse {
    background: url('<%=request.getContextPath()%>/conf_files/easyUI/themes/icons/edit_remove.png') no-repeat center;
}


/* 修改数据行高度 */
.datagrid-row {
    height: 40px !important;  /* 调整行高，如 40px‌:ml-citation{ref="2,3" data="citationList"} */
}




</style>
</html>